<template>
  <div class="l-customer">
    <view class="customer-flex _df _ac _fc _jc">
      <view class="title">长按二维码添加客服咨询</view>
      <view class="qrcode-bg _df _ac _fc _jc">
        <view class="qrcode-img">
          <image :src="qrcodeBg" mode="" />
          <view class="customer-qrcode">
            <image
              :show-menu-by-longpress="true"
              :src="qrcode"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <view class="customer-tel _df _fr _ac" @click="callPhone">
        <view class="phoneT _df _fr _ac">
          <u-icon class="mr10 mt5" name="phone-fill" size="30"></u-icon>
          咨询电话
        </view>
        <text class="tel ml15">
          {{ phoneNumber }}
        </text>
      </view>
    </view>
  </div>
</template>

<script>
import host from "@/utils/config";
const app = getApp().globalData;
export default {
  name: "l-customer",
  props: {},
  data() {
    return {
      phoneNumber: "",
      qrcodeBg: "",
      qrcode: "",
      host: host.host1,
    };
  },
  computed: {},
  methods: {
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber,
      });
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.phoneNumber = app.cusPhone;
    this.qrcodeBg = this.host + "/images/wx/qrcode_bg.png";
    this.qrcode = this.host + "/images/wx/customer_code.png";
  },
};
</script>

<style lang="scss" scoped>
@import './l-customer';
</style>